<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title="个人信息" :isAppBtn="false"></HeadCustom>
		<view class="wrap">
			<view class="card fboxRow Ycenter">
				<view class="tit font34 flex1">头像</view>
				<view class="action" @click="changeAvatar"><image class="avatar" :src="fromData.avatar" mode="aspectFill"></image></view>
			</view>
			<view class="line"></view>
			<view class="card">
				<view class="tit font26 flex1">姓名</view>
				<view class="action mt10">
					<u--input
						placeholder="请输入"
						border="none"
						v-if="!fromData.isAuth"
						fontSize="34rpx"
						clearable
						v-model="fromData.realName"
						placeholderStyle="border:none;" placeholderClass="inputPlaceholder"
					></u--input>
					<view class="fboxRow disable_sm mt20" v-else>
						{{ fromData.realName }}
						<image class="img_sm" src="https://ebc-prod.cdn.benwunet.com/uni-static/workplace/icon-s.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="card">
				<view class="tit font26 flex1">性别</view>
				<view class="action mt20 fboxRow Ycenter font34" @click="sexTap" v-if="!fromData.isAuth">
					<view class="flex1" v-if="fromData.gender">{{ fromData.gender == 1 ? '男' : '女' }}</view>
					<view v-else class="flex1 color-6B707C">请设置</view>
					<text class="bwfont bw-arrow-right color-ACB4C7 font28"></text>
				</view>
				<view class="fboxRow disable_sm mt20" v-else>
					{{ fromData.gender == 1 ? '男' : '女' }}
					<image class="img_sm" src="https://ebc-prod.cdn.benwunet.com/uni-static/workplace/icon-s.png" mode=""></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="card">
				<view class="tit font26 flex1">出生年月</view>
				<view class="action mt20 fboxRow Ycenter font34" @click="dateTap" v-if="!fromData.isAuth">
					<view class="flex1">
						<view class="uni-input">{{ fromData.birthday || '请设置' }}</view>
					</view>
					<text class="bwfont bw-arrow-right color-ACB4C7 font28"></text>
				</view>
				<view class="fboxRow disable_sm mt20" v-else>
					{{ fromData.birthday }}
					<image class="img_sm" src="https://ebc-prod.cdn.benwunet.com/uni-static/workplace/icon-s.png" mode=""></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="card">
				<view class="tit font26 flex1">邮箱</view>
				<view class="action mt10">
					<u--input
						placeholder="选填邮箱(用于接受面试)"
						border="none"
						fontSize="34rpx"
						clearable
						v-model="fromData.email"
						placeholderStyle="border:none;" placeholderClass="inputPlaceholder"
					></u--input>
				</view>
			</view>
			<view class="line"></view>
			<view class="fboxCol mt40 color-ACB4C7" v-if="fromData.isAuth">
				<text>温馨提示：</text>
				<text>已实名认证信息项，不可修改</text>
			</view>
			
			<BottomFixed>
				<view class="btn-group-inner flex1 fboxRow Ycenter Xcenter">
					<view class="btn fboxRow Ycenter Xcenter font30 color-141720 bg-linear" @click="save">保存</view>
				</view>
			</BottomFixed>
		</view>
		<!-- <u-picker :show="isSex" :columns="array" keyName="label" @close="isSex = false" @cancel="isSex = false" @confirm="sexConfirm"></u-picker> -->

		<PickerBlack type="list" :list="array" keyName="label" :isShow.sync="isSex" @confirm="sexConfirm" />
		<PickerBlack type="date" :val="dateVal" :minDate="startDate" :maxDate="endDate" :isShow.sync="isDate" @confirm="dateConfirm" />
	</view>
</template>

<script>
import { sysAreaModuleList } from '@/api/recruit.js';
import { fileUploadAnon } from '@/api/index.js';
import { timestampToTime, getDate } from '@/static/js/common.js';
import PickerBlack from '../components/picker-black.vue';
import BottomFixed from '@/components/bottom-btn/fixed.vue'
import { recruitMixins } from '../common/recruit.mixins.js';
export default {
	mixins: [recruitMixins],
	components: {
		PickerBlack,
		BottomFixed
	},
	data() {
		return {
			theme: getApp().globalData.appTheme,
						globalColor: getApp().globalData.globalColor,
			fromData: {
				avatar: 'https://ebc-prod.cdn.benwunet.com/datahuman/vip-newyear/video-bg3.jpg',
				realName: '本小五',
				age: '32',
				gender: 1,
				birthday: '1990-05-04',
				email: ''
			},
			array: [
				[
					{
						value: '0',
						label: '女'
					},
					{
						value: '1',
						label: '男'
					}
				]
			],
			isDate: false,
			datePicker: '',
			isSex: false,
			dateVal: '',
			startDate: getDate('start', 80),
			endDate: getDate('end', 0)
		};
	},
	onLoad() {
		this.getInit();

		this.datePicker = new Date(this.fromData.birthday).getTime();
	},
	mounted() {
		// #ifdef H5
		window.appFileCallback = this.appFileCallback;
		// #endif
	},
	methods: {
		getInit() {
			this.fromData = getApp().globalData.vitaTemp;
		},
		changeAvatar() {
			// #ifdef H5
			let u = navigator.userAgent;
			if (!/(iPhone|iPad|iPod|iOS)/i.test(u)) {
				try {
					const data = {
						type: 'imgUpload',
						extension: ['.png', '.jpg', '.jpeg']
					};
					window.android.recruitHandler(JSON.stringify(data));
				} catch (err) {
					console.log(err);
				}
			} else {
				uni.chooseFile({
					count: 1,
					extension: ['.png', '.jpg'],
					success: res => {
						const file = res.tempFiles[0];
						fileUploadAnon(file).then(res => {
							if (res.data) {
								this.fromData.avatar = res.data.url;
							}
						});
					}
				});
			}
			// #endif
			// #ifdef MP
				uni.chooseFile({
					count: 1,
					extension: ['.png', '.jpg'],
					success: res => {
						const file = res.tempFiles[0];
						fileUploadAnon(file).then(res => {
							if (res.data) {
								this.fromData.avatar = res.data.url;
							}
						});
					}
				});
			// #endif
		},
		appFileCallback(res) {
			this.fromData.avatar = res.fileUrl;
		},
		save() {
			// console.log(this.fromData)
			// uni.navigateBack({delta:1})
			this.postSave(this.fromData, 'back', 1);
		},
		sexTap() {
			this.isSex = true;
		},
		sexConfirm(e) {
			this.fromData.gender = e.value[0].value;
			this.isSex = false;
		},
		dateTap() {
			this.dateVal = this.fromData.birthday ? new Date(this.fromData.birthday).getTime() : new Date().getTime();
			this.isDate = true;
		},
		dateConfirm(e) {
			this.fromData.birthday = timestampToTime(e.value, 'YMD');
			this.isDate = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.page-wrap {
	min-height: calc(100vh);
}
.color_ccc{
	color: #ccc;
	:nth-child(1){
		margin-bottom: 20rpx;
	}
}
.img_sm {
	width: 40rpx;
	height: 40rpx;
	margin-left: 10rpx;
}
.disable_sm {
	align-items: center;
	font-size: 34rpx;
}
.wrap {
	padding: 32rpx 40rpx;
}

.card {
	// padding: 32rpx;
	// margin-bottom: 82rpx;
}

.line {
	margin: 40rpx 0;
	height: 1rpx;
	background: var(--backgroundDivisionColor);
}

.avatar {
	margin-right: 24rpx;
	width: 100rpx;
	height: 100rpx;
	border: 2rpx solid #f7f9ff;
	border-radius: 50%;
	overflow: hidden;
}

.uni-input {
	height: 50rpx;
}

.uni-input-input {
	color: #f7f9ff;
}

.tags .tag {
	margin: 16rpx 16rpx 16rpx 0;
	padding: 0 12rpx;
	height: 48rpx;
	border-radius: 8rpx;
}

.btn-group {
	border-radius: 8rpx;
	overflow: hidden;
}

.btn-group .btn {
	padding: 0 12rpx;
	height: 48rpx;
}

.more-item {
	height: 70rpx;
	margin-bottom: 24rpx;
}

.card .tit.font26{color: var(--contourButtonTextColor)}
.card .con {
	line-height: 38rpx;
}


.btn-group-inner .btn {
	width: 570rpx;
	height: 76rpx;
	border-radius: 12rpx;
}

</style>
